<!--MPS激活列表选择框-->
<template>
  <div>
    <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="800px"
      @ok="handleOk" destroyOnClose @visible-change="visibleChange">
      <BasicTable :columns="columns" v-bind="config" :useSearchForm="true" :formConfig="formConfig"
        :api="getPlanMpsList" :searchInfo="searchInfo" :rowSelection="rowSelection"
        :indexColumnProps="indexColumnProps"></BasicTable>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    ref,
    unref,
    reactive
  } from 'vue';
  import {
    BasicModal,
    useModalInner
  } from '/@/components/Modal';
  import {
    getPlanMpsList
  } from './base.api';
  import {
    createAsyncComponent
  } from '/@/utils/factory/createAsyncComponent';
  import {
    useSelectBiz
  } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
  import {
    selectProps
  } from '/@/components/Form/src/jeecg/props/props';
  import {
    useAttrs
  } from '/@/hooks/core/useAttrs';
  import {
    queryTreeList,
    getUserList
  } from '/@/api/common/api';
  import {
    useUserStore
  } from '/@/store/modules/user';

  export default defineComponent({
    name: 'MpsSelectModel',
    components: {
      //此处需要异步加载BasicTable
      BasicModal,
      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
        loading: true,
      }),
    },
    props: {
      ...selectProps,
      //选择框标题
      modalTitle: {
        type: String,
        default: 'MPS列表选择',
      },
      multiple: {
        type: Boolean,
        default: false
      }
    },

    emits: ['register', 'getSelectResult'],
    setup(props, {
      emit
    }) {
      //注册弹框
      const [register,{
        closeModal
      }] = useModalInner();
      const attrs = useAttrs();
      //表格配置
      const config = {
        canResize: false,
        bordered: true,
        size: 'small',
        rowKey: unref(props).rowKey,
        labelKey: 'planName',
        isRadioSelection: !(props.multiple == true) ?? true,
      };
      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
      const [{
        rowSelection,
        indexColumnProps,
        visibleChange,
        getSelectResult,
        reset
      }] = useSelectBiz(getPlanMpsList, getBindValue);
      rowSelection.columnWidth = 50;
      indexColumnProps.width = 50;
      const searchInfo = ref(props.params);

      const userStore = useUserStore();

      const {
        id
      } = userStore.getUserInfo

      const awaitList = reactive({
        data: []
      })
      getList()
      let initTreeList = ref([])
      const treeList = ref([])
      async function tableData() {
        initTreeList.value = await queryTreeList()
        treeList.value = flatten(initTreeList.value)
      }

      function flatten(arr) {
        let res = [];
        for (let i = 0; i < arr.length; i++) {
          const child = arr[i].children;
          if (child ?.length > 0) {
            res = res.concat(flatten(child));
          }
          res.push(arr[i]);
        }
        return res;
      }
      async function getList() {
        awaitList.data = (await getUserList({
          pageNo: 1,
          pageSize: 9999
        })).records
      }
      tableData()
      //查询form
      const formConfig = {
        labelWidth: 80,
        baseColProps: {
          xs: 7,
          sm: 7,
          md: 7
        },
        schemas: [{
          label: '主计划编号',
          field: 'mainPlanCode',
          component: 'JInput',
          colProps: {
            span: 6
          },
        }, {
          label: '计划名称',
          field: 'planName',
          component: 'JInput',
          colProps: {
            span: 6
          },
        }, {
          label: '版本号',
          field: 'version',
          component: 'JInput',
          colProps: {
            span: 6
          },
        }],
      };
      //定义表格列
      const columns = [{
          title: '主计划编号',
          align: "center",
          dataIndex: 'mainPlanCode'
        },
        {
          title: '计划名称',
          align: "center",
          dataIndex: 'planName'
        },
        {
          title: '版本号',
          align: "center",
          dataIndex: 'version'
        },
        {
          title: '所属部门',
          align: "center",
          dataIndex: 'department',
          customRender: ({ text }) => {
            return treeList.value.filter(item => item.id == text)[0]?.departName
          }
        },
        {
          title: '计划时间',
          align: "center",
          sorter: true,
          dataIndex: 'planTime',
          customRender: ({
            text
          }) => {
            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
          },
        },
        {
          title: '是否跑MRP',
          align: "center",
          dataIndex: 'isMrpRun',
          customRender: ({
            text
          }) => {
            return text == 1 ? '是' : text == 0 ? '否' : ''
          },
        },
        {
          title: '是否已下发',
          align: "center",
          dataIndex: 'isIssued',
          customRender: ({
            text
          }) => {
            return text == 1 ? '是' : text == 0 ? '否' : ''
          },
        },
        {
          title: '计划员',
          align: "center",
          dataIndex: 'planner',
          customRender: ({ text }) => awaitList.data.filter(item => text === item.id)[0]?.realname
        },
        {
          title: '计划组织',
          align: "center",
          dataIndex: 'planOrg',
          customRender: ({ text }) => {
            return treeList.value.filter(item => item.id == text)[0]?.departName
          }
        },
        {
          title: '计划状态',
          align: "center",
          dataIndex: 'planStatus'
        },
        {
          title: '计划周期',
          align: "center",
          dataIndex: 'planCycle'
        },
        {
          title: '执行部门',
          align: "center",
          dataIndex: 'playDept',
          customRender: ({ text }) => {
            return treeList.value.filter(item => item.id == text)[0]?.departName
          }
        },
        {
          title: '第三方编码',
          align: "center",
          dataIndex: 'thirdPartyCode',
          ifShow: false
        },
      ];

      /**
       * 确定选择
       */
      function handleOk() {
        getSelectResult((options, values) => {
          //回传选项和已选择的值
          emit('getSelectResult', options, values);
          //关闭弹窗
          closeModal();
          // 清空选择器的选择
          reset();
        });
      }

      return {
        config,
        handleOk,
        searchInfo,
        register,
        indexColumnProps,
        visibleChange,
        getPlanMpsList,
        formConfig,
        getBindValue,
        columns,
        rowSelection,
      };
    },
  });

</script>
